<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<title>U袋网</title>
<!-- 引入layui样式和脚本 -->
<link rel="stylesheet" href="../admin/layui/css/layui.css">
<script src="../admin/layui/layui.js"></script>
</head>
<body>
	<!-- 顶部tab -->
	<!-- 引入头部 -->
	<jsp:include page="header.jsp"></jsp:include>
	<div class="content inner">
		<section class="item-show__div item-show__head clearfix">
			<div class="pull-left">
				<ol class="breadcrumb">
					<li><a href="index.html">首页</a></li>
					<!-- <li><a href="item_sale_page.html">爆款推荐</a></li> -->
					<li class="active">${proProId.proName }</li>
				</ol>
				<div class="item-pic__box" id="magnifier">
					<div class="small-box">
						<img class="cover" src="../admin/showPic/${proProId.proUrl }"
							alt="${proProId.proName }"> <span class="hover"></span>
					</div>
					<!-- 详情图片开始 -->
					<div class="thumbnail-box">
						<a href="javascript:;" class="btn btn-default btn-prev"></a>
						<div class="thumb-list">
							<ul class="wrapper clearfix">
								<c:forEach items="${getProUrls }" var="getProUrls">
									<li class="item active" data-src="${getProUrls.pUrl }"><img
										class="cover" src="../admin/showPic/${getProUrls.pUrl }"
										alt="商品预览图"></li>
								</c:forEach>
							</ul>
							<!-- 
							<ul class="wrapper clearfix">
								<c:forEach items="${getProUrls }" var="ProUrls">
									<li class="item" data-src="${ProUrls.pUrl }"><img
										class="cover" src="${ProUrls.pUrl }" alt="商品预览图"></li>
								</c:forEach>
							</ul>
							-->
						</div>
						<a href="javascript:;" class="btn btn-default btn-next"></a>
					</div>
					<!-- 详情图片结束 -->

				</div>
				<script src="js/jquery.magnifier.js"></script>
				<script>
					$(function () {
						$('#magnifier').magnifier();
					});
				</script>
				<div class="item-info__box">
					<div class="item-title">
						<div class="name ep2">商品简介：${proProId.introduce }</div>
					</div>
					<div class="item-price bgf5">
						<div class="price-box clearfix">
							<div class="price-panel pull-left">
								售价：<span class="price">￥ ${proProId.currentPrice } <s
									class="fz16 c9">￥ ${proProId.originalPrice }</s></span>
							</div>
							<div class="price-panel pull-right">
								累计销量：<span class="price"> ${proProId.salesAmount }</span>
							</div>
						</div>

					</div>
					<div class="item-key">
						<div class="item-sku">
							<dl class="item-prop clearfix">
								<dt class="item-metatit">品牌：${proProId.brand }</dt>
							</dl>
							<dl class="item-prop clearfix">
								<dt class="item-metatit">材质：${proProId.material }</dt>
							</dl>
						</div>
						<div class="item-amount clearfix bgf5">
							<div class="item-metatit">数量：</div>
							<div class="amount-box">
								<div class="amount-widget">
									<input class="amount-input" value="1" maxlength="8"
										title="请输入购买量" type="text" id="proNum">
									<div class="amount-btn">
										<a class="amount-but add"></a> <a class="amount-but sub"></a>
									</div>
								</div>
								<div class="item-stock">
									<span style="margin-left: 10px;">库存 <b id="Stock">${proProId.inventory }</b>
										件
									</span>
								</div>
								<script>
									$(function () {
										//$('.amount-input').onlyReg({reg: /[^0-9]/g});
										var stock = parseInt($('#Stock').html());
										$('.amount-widget').on('click','.amount-but',function() {
											var num = parseInt($('.amount-input').val());
											if (!num) num = 0;
											if ($(this).hasClass('add')) {
												if (num > 9){
													return DJMask.open({
													　　width:"300px",
													　　height:"100px",
													　　content:"您输入的数量限购数量"
										　　        });
											  }
												$('.amount-input').val(num + 1);
											} else if ($(this).hasClass('sub')) {
												if (num < 0){
													return DJMask.open({
													　　width:"300px",
													　　height:"100px",
													　　content:"您输入的数量有误"
												　});
												}
												$('.amount-input').val(num - 1);
											}
										});
									});
								</script>
							</div>
						</div>
						<!-- 添加购物车 -->
						<div class="item-action clearfix bgf5">
							<a href="javascript:;" rel="nofollow" data-addfastbuy="true"
								role="button" data-pid="${proProId.proId }"
								class="item-action__basket" onclick="addToCat(this)"> <i
								class="iconfont icon-shopcart"></i> 加入购物车
							</a>
							
							<c:if test="${ not empty USER_SESSION}">
							<a href="javascript:;" rel="nofollow"
								data-pid="${proProId.proId }" onclick="toOrder(this)"
								data-addfastbuy="true" title="点击此按钮，到下一步确认购买信息。" role="button"
								class="item-action__buy">立即购买 </a>
							</c:if>
							
						</div>
					</div>
				</div>
			</div>
			<div class="pull-right picked-div">
				<div class="lace-title">
					<span class="c6">爆款推荐</span>
				</div>
				<div class="swiper-container picked-swiper">
					<div class="swiper-wrapper">

						<div class="swiper-slide">
							<c:forEach items="${proProPosions }" var="proProPosions">
								<a class="picked-item"
									href="getProTuiTypeId?proId=${proProPosions.proId }"> <img
									src="../admin/showPic/${proProPosions.proUrl }" alt=""
									class="cover">
									<div class="look_price">¥ ${proProPosions.currentPrice }</div>
								</a>
							</c:forEach>
						</div>
					</div>
				</div>

			</div>
		</section>
		<section class="item-show__div item-show__body posr clearfix">
			<div class="item-nav-tabs">
				<ul class="nav-tabs nav-pills clearfix" role="tablist"
					id="item-tabs">
					<li role="presentation" class="active"><a href="#detail"
						role="tab" data-toggle="tab" aria-controls="detail"
						aria-expanded="true">商品详情</a></li>
					<li role="presentation"><a href="#evaluate" role="tab"
						data-toggle="tab" aria-controls="evaluate">累计评价 <span
							class="badge">1314</span></a></li>
				</ul>
			</div>
			<div class="pull-left">
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active" id="detail"
						aria-labelledby="detail-tab">
						<div class="item-detail__info clearfix">
							<div class="record">商品编号：${proProId.bianHao }</div>
							<div class="record">生产厂家：${proProId.address }</div>
							<div class="record">商品是否定制：${proProId.dingZhi }</div>
							<div class="record">商品库存：${proProId.inventory }件</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="evaluate"
						aria-labelledby="evaluate-tab">
						<div class="evaluate-tabs bgf5">
							<ul class="nav-tabs nav-pills clearfix" role="tablist">
								<li role="presentation" class="active"><a href="#all"
									role="tab" data-toggle="tab" aria-controls="all"
									aria-expanded="true">全部评价</a></li>
							</ul>
						</div>
						<div class="evaluate-content">
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane fade in active" id="all"
									aria-labelledby="all-tab">

									<c:forEach items="${getevaluation }" var="getevaluation">
										<div class="eval-box">
											<div class="eval-author">
												<div class="port">
													<img src="images/icons/default_avt.png" alt="欢迎来到U袋网"
														class="cover b-r50">
												</div>
												<div class="name">${getevaluation.userPhone }</div>
											</div>
											<div class="eval-content">
												<div class="eval-text">${getevaluation.content }</div>
												<div class="eval-imgs">
													<div class="img-temp">
														<img src="images/temp/S-001-1_s.jpg"
															data-src="${getevaluation.picture }" data-action="zoom"
															class="cover">
													</div>
												</div>
												<div class="eval-time">评价时间：${getevaluation.etime }
													回复：${getevaluation.replyContent }</div>
											</div>
										</div>
									</c:forEach>
								</div>
							</div>
							<script src="js/jquery.zoom.js"></script>
						</div>
					</div>

				</div>
				<!-- 底部推荐轮播图 -->
				<div class="recommends">
					<div class="lace-title type-2">
						<span class="cr">爆款推荐</span>
					</div>
					<div class="swiper-container recommends-swiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<c:forEach items="${proProPosions2 }" var="proProPosions2">
									<a class="picked-item"
										href="getProTuiTypeId?proId=${proProPosions2.proId }"> <img
										src="../admin/showPic/${proProPosions2.proUrl }" alt=""
										class="cover">
										<div class="look_price">¥ ${proProPosions2.currentPrice }</div>
									</a>
								</c:forEach>
							</div>
						</div>
					</div>
					<script>
						$(document).ready(function(){
							var recommends = new Swiper('.recommends-swiper', {
								spaceBetween : 40,
								autoplay : 5000,
							});
						});
					</script>
				</div>
			</div>

			<!-- <script>
				$(document).ready(function(){
					$('#descCate').smartFloat(0);
					$('.dc-idsItem').click(function() {
						$(this).addClass('selected').siblings().removeClass('selected');
					});
					$('#item-tabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
						$('#descCate #' + $(e.target).attr('aria-controls') + '-tab')
						.addClass('in').addClass('active').siblings()
						.removeClass('in').removeClass('active');
					});
				});
			</script> -->
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item"><a href="getOderList"
				class="r-item-hd"> <i class="iconfont icon-user"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">用户中心</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="getProCatList"
				class="r-item-hd"> <i class="iconfont icon-cart"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">购物车</span>
					</div>
			</a></li>
			<!-- <li class="r-toolbar-item"><a href="udai_collection.html"
				class="r-item-hd"> <i class="iconfont icon-aixin"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">我的收藏</span>
					</div>
			</a></li> -->
			<li class="r-toolbar-item"><a href="" class="r-item-hd"> <i
					class="iconfont icon-liaotian"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">联系客服：0714-8868331</span>
					</div>
			</a></li>
			<!-- <li class="r-toolbar-item"><a href="issues.html"
				class="r-item-hd"> <i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">留言反馈</span>
					</div>
			</a></li> -->
			<li class="r-toolbar-item to-top"><i class="iconfont icon-top"></i>
				<div class="r-tip__box">
					<span class="r-tip-text">返回顶部</span>
				</div></li>
		</ul>
		<script>
			$(document).ready(function(){ $('.to-top').toTop({position:false}) });
		</script>
	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="copy-box clearfix">
			<!-- 版权 -->
			<c:forEach items="${gongsi }" var="list">
				<p class="copyright">
					© 2005-2017 U袋网 版权所有，并保留所有权利<br>
					${list.detail }&nbsp;&nbsp;&nbsp;&nbsp;${list.address }&nbsp;&nbsp;&nbsp;&nbsp;Tel:
					${list.tel }&nbsp;&nbsp;&nbsp;&nbsp;E-mail: ${list.email }
				</p>
			</c:forEach> 
		</div>
	</div>

	<script type="text/javascript">
	//监听添加购物车的单击事件
	function addToCat(obj) {
		//接受到商品id
		var pid = $(obj).data("pid");
		//接收到商品数量
		var num = $("#proNum").val();
		//发ajax请求服务端
		$.post("addShopping",{"pid":pid,"num":num},function(res){
			console.log(res);
			alert(res.msg)
		},"json")
	};
	//监听直接购买的单击事件 
	function toOrder(obj) {
		//接受到商品id
		var proId = $(obj).data("pid");
		//接收到商品数量
		var proNum = $("#proNum").val();
		
		location.href="getZhiJieGou?proId="+proId+"&proNum="+proNum;
	}
	
	</script>


</body>
</html>